import { SearchOutlined } from '@ant-design/icons'
import { Input, Table, TableColumnsType } from 'antd'
import './AllXunDan.scss'
import { useState } from 'react';
import { RowSelectionType } from 'antd/es/table/interface';
const total = 281

interface DataType {
    id: number;
    orderId: string;
    downTime: string;
    beforeTime: string;
    afterTime: string;
    status: number;
    leftOver: string;
    rightOver: string;
    goods: string;
    weight: number;
    overTime: string;
}
const columns: TableColumnsType<DataType> = [
    {
        title: '订单号',
        dataIndex: 'orderId',
        render: (text: string) => <a>{text}</a>,
    },
    {
        title: '下单时间',
        dataIndex: 'downTime',
    },
    {
        title: '计划发车时间',
        dataIndex: 'beforeTime',
    },
    {
        title: '计划到达时间',
        dataIndex: 'afterTime',
    },
    {
        title: '状态',
        dataIndex: 'status',
        render: (text: number) => <span>{text == 1 ? '审核中' : text == 2 ? '已报价' : text == 3 ? "已拒绝" : text == 4 ? '已过期' : '-'}</span>,
    },
    {
        title: '出发地',
        dataIndex: 'leftOver',
    },
    {
        title: '目的地',
        dataIndex: 'rightOver',
    },
    {
        title: '货物',
        dataIndex: 'goods',
    },
    {
        title: '重量(kg)',
        dataIndex: 'weight',
    },
    {
        title: '报价有效截止日期',
        dataIndex: 'overTime',
    },
];

const data: DataType[] = [
    {
        id: 1,
        orderId: 'XL00000001',
        downTime: '2024/09/10 09:12:59',
        beforeTime: '2024/09/10 09:12:59',
        afterTime: '2024/10/10 09:12:59',
        status: 1,
        leftOver: "青岛市",
        rightOver: '天津市',
        goods: "白糖",
        weight: 50,
        overTime: "2024/10/15 09:12:59"
    },
    {
        id: 2,
        orderId: 'XL00000002',
        downTime: '2024/09/10 09:12:59',
        beforeTime: '2024/09/10 09:12:59',
        afterTime: '2024/10/10 09:12:59',
        status: 2,
        leftOver: "青岛市",
        rightOver: '天津市',
        goods: "木头",
        weight: 50,
        overTime: "2024/10/15 09:12:59"
    },
    {
        id: 3,
        orderId: 'XL00000003',
        downTime: '2024/09/10 09:12:59',
        beforeTime: '2024/09/10 09:12:59',
        afterTime: '2024/10/10 09:12:59',
        status: 3,
        leftOver: "青岛市",
        rightOver: '天津市',
        goods: "零件",
        weight: 50,
        overTime: "2024/10/15 09:12:59"
    },
    {
        id: 4,
        orderId: 'XL00000004',
        downTime: '2024/09/10 09:12:59',
        beforeTime: '2024/09/10 09:12:59',
        afterTime: '2024/10/10 09:12:59',
        status: 4,
        leftOver: "青岛市",
        rightOver: '天津市',
        goods: "方便面",
        weight: 50,
        overTime: "2024/10/15 09:12:59"
    },
    {
        id: 5,
        orderId: 'XL00000005',
        downTime: '2024/09/15 09:12:59',
        beforeTime: '2024/09/15 09:12:59',
        afterTime: '2024/10/10 09:12:59',
        status: 5,
        leftOver: "青岛市",
        rightOver: '天津市',
        goods: "水果",
        weight: 50,
        overTime: "2024/10/15 09:12:59"
    }

];
const selectionType: RowSelectionType = 'radio'
export default function AllXunDan() {
    return (
        <div className='AllXunDan'>
            <div>
                <div className='title_search'>
                    <span className='text_total'>共{total}条</span>
                    <Input className='search' placeholder="请输入关键词" variant="borderless" prefix={<SearchOutlined />} />
                </div>
                <div>
                    图标
                </div>
            </div>
            <div className='table_container'>
                <Table<DataType>
                    rowKey="id"
                    className="custom-table"
                    rowSelection={{ type: selectionType, defaultSelectedRowKeys: [1] }}
                    columns={columns}
                    dataSource={data}
                />
            </div>
        </div>
    )
}

<style lang='sass'>

</style>